<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" :model="queryForm" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="反馈要求">
            <el-input v-model.trim="queryForm.feedback_require" type="textarea" :rows="5" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="反馈描述" prop="feedback_desc">
            <el-input v-model="queryForm.feedback_desc" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="附件上传" prop="fujian">
            <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false"
              :on-change="onChangePicture" :on-remove="handleRemovePicture" :multiple="true" :file-list="pictureList"
              :before-remove="beforeRemove" :data="queryForm">
              <el-button size="small" icon="el-icon-upload2" type="primary">
                文件上传
              </el-button>
              <div slot="tip" class="el-upload__tip">
                附件大小上限：5.0MB
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{
        loading? '确定中 ...': '确 定'
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveWOD, detalisWOD } from '@/api/warningOrderDept'
export default {
  name: 'fkEdit',
  data() {
    return {
      pictureList: [],
      queryForm: {
        id: '',
        delIds: '',
        dept_id: '',
        feedback_desc: '',
        feedback_require: ''
      },
      picturenames: [],
      loading: false,
      disabled: false,
      rules: {
        feedback_desc: [
          { required: true, trigger: 'blur', message: '请输入反馈描述' },
        ]
      },
      title: '',
      dialogFormVisible: false,
    }
  },
  created() { },
  methods: {
    showDia(row) {
      this.loading = false
      this.disabled = false
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '反馈';
        this.queryForm.dept_id = [];
        this.detailsLoad(row.id);
      }
      this.dialogFormVisible = true
    },
    close() {
      this.$refs['form'].clearValidate();
      this.queryForm = this.$options.data().queryForm
      this.dialogFormVisible = false
    },
    detailsLoad(id) {//带入数据
      detalisWOD({ id: id }).then((res) => {
        this.pictureList = res.data.files;
        this.queryForm = Object.assign({}, res.data)
      })
    },
    save() {
      if (this.loading) {
        return
      }
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true
          const params = new FormData()
          for (let i = 0; i < this.pictureList.length; i++) {
            const f = this.pictureList[i]
            params.append('file', f.raw)
          }
          params.append('body', JSON.stringify(this.queryForm))
          saveWOD(params).then((res) => {
            if (res.code == 0) {
              this.pictureList = [];
              this.$baseMessage('反馈成功', 'success')
              this.close()
            } else {
              this.loading = false
              this.disabled = false
            }
          })
        } else {
          return false
        }
      })
    },
    onChangePicture(file, fileList) {
      this.pictureList = fileList;
    },
    handleRemovePicture(file, fileList) {
      this.pictureList = fileList
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      if (undefined == this.queryForm.delIds) {
        this.queryForm.delIds = [];
      }
      this.queryForm.delIds.push(file.id);
    }
  },
}
</script>
